<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Header Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<div th:fragment="header">

    <header id="app-bar" class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-elevation--z4 shadow-sm">
        <nav class="mdc-top-app-bar__row navbar navbar-dark bg-dark">
            <div class="container-fluid container-fluid d-flex align-items-center justify-content-between">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <button th:if="${'true' == #strings.defaultString(#themes.code('cas.drawer-menu.enabled'), 'true')}"
                            class="mdc-icon-button mdc-top-app-bar__navigation-icon  btn btn-outline-light"
                            id="drawerButton"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#app-drawer">
                        <span class="mdi mdi-menu fa fa-bars"></span>
                        <span class="visually-hidden">menu</span>
                    </button>
                </section>
                <section class="mdc-top-app-bar__section">
                    <span class="cas-brand mx-auto">
                        <span class="visually-hidden" th:text="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS')}">CAS</span>
                        <a th:href="@{/}">
                            <img id="cas-logo" class="cas-logo"
                                 th:title="${#strings.defaultString(#themes.code('cas.theme.name'), 'CAS')}"
                                 th:src="@{${#strings.defaultString(#themes.code('cas.logo.file'), '/images/cas-logo.png')}}"
                            />
                        </a>
                    </span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                    <button id="cas-notifications-menu"
                            th:if="${'true' == #strings.defaultString(#themes.code('cas.notifications-menu.enabled'), 'true')}"
                            class="mdc-icon-button mdc-top-app-bar__action-item cas-notification-toggle btn btn-outline-light"
                            aria-label="Bookmark this page"
                            data-bs-toggle="modal"
                            data-bs-target="#cas-notification-dialog">
                        <span class="mdi mdi-bell-alert fa fa-bell"></span>
                        <span class="visually-hidden">notifications</span>
                        <i id="notifications-count" class="notifications-count count">2</i>
                    </button>

                    <a id="cas-user-account"
                       th:href="@{/account}"
                       th:if="${accountProfileManagementEnabled != null
                        && accountProfileManagementEnabled
                        && ticketGrantingTicketId != null}"
                       class="mdc-icon-button mdc-top-app-bar__action-item"
                       aria-label="User Account">
                        <span class="mdi mdi-account-group"></span>
                        <span class="visually-hidden">user account</span>
                    </a>
                </section>
            </div>
        </nav>
    </header>

    <div th:replace="~{fragments/logindrawer :: logindrawer}"/>

    <script>var countMessages = 0;</script>
    <div
            th:if="${'true' == #strings.defaultString(#themes.code('cas.notifications-menu.enabled'), 'true')}"
            class="mdc-dialog cas-notification-dialog modal"
            id="cas-notification-dialog" role="alertdialog"
            aria-modal="true" aria-labelledby="notif-dialog-title"
            aria-describedby="notif-dialog-content">
        <div class="mdc-dialog__container modal-dialog">
            <div class="mdc-dialog__surface modal-content">
                <h1 class="mdc-dialog__title mt-lg-2 modal-header modal-title" id="notif-dialog-title">
                    Notifications
                </h1>
                <div class="mdc-dialog__content modal-body" id="notif-dialog-content">
                    <div class="cas-notification-message mdc-typography--body1" th:if="${staticAuthentication}">
                        <script>countMessages++;</script>
                        <h6 class="mdc-typography--headline6 mdi mdi-alert-circle fas fa-exclamation-circle"
                            th:utext="#{screen.defaultauthn.title}"/>
                        <p class="text text-wrap small" th:utext="#{screen.defaultauthn.heading}">
                            <i class="mdi mdi-google fas fa-google"></i>
                            Static AuthN is ONLY useful for demo purposes. It is recommended that you connect CAS to
                            LDAP,
                            JDBC, etc
                            instead.
                        </p>
                    </div>
                    <div class="cas-notification-message mdc-typography--body1"
                         th:unless="${httpRequestSecure}">
                        <h6 class="mdc-typography--headline6 mdi mdi-alert-circle fas fa-exclamation-circle"
                            th:utext="#{screen.nonsecure.title}"/>
                        <script>countMessages++;</script>
                        <p class="text-wrap small" th:utext="#{screen.nonsecure.message}">
                            Unsure Connection
                        </p>
                    </div>

                    <div id="cookiesSupportedDiv" class="cas-notification-message mdc-typography--body1" style="display: none">
                        <h6 class="mdc-typography--headline6 mdi mdi-alert-circle fas fa-exclamation-circle"
                            th:utext="#{screen.cookies.disabled.title}"></h6>
                        <p class="text-wrap small" th:utext="#{screen.cookies.disabled.message}">
                            Cookies are not supported by this browser.
                        </p>
                    </div>

                </div>
                <footer class="mdc-dialog__actions modal-footer">
                    <button type="button" class="mdc-button mdc-button--raised mdc-dialog__button btn btn-primary"
                            data-mdc-dialog-action="accept"
                            data-mdc-dialog-button-default
                            data-bs-dismiss="modal">
                        <span class="mdc-button__label">OK</span>
                    </button>
                </footer>
            </div>
        </div>
        <div class="mdc-dialog__scrim"></div>
    </div>

    <script type="text/javascript">

        (material => {
            let header = {
                init: () => {
                    header.attachTopbar();
                    material.autoInit();
                },
                attachDrawer: () => {
                    let elm = document.getElementById('app-drawer');
                    if (elm != null) {
                        let drawer = material.drawer.MDCDrawer.attachTo(elm);
                        let closeDrawer = evt => {
                            drawer.open = false;
                        };
                        drawer.foundation.handleScrimClick = closeDrawer;
                        document.onkeydown = evt => {
                            evt = evt || window.event;
                            if (evt.keyCode == 27) {
                                closeDrawer();
                            }
                        };
                        header.drawer = drawer;
                        return drawer;
                    }
                    return undefined;
                },
                attachTopbar: drawer => {

                    drawer = header.attachDrawer();
                    let dialog = header.attachNotificationDialog();

                    if (drawer != undefined) {
                        header.attachDrawerToggle(drawer);
                    }
                    if (dialog != undefined) {
                        header.attachNotificationToggle(dialog);
                    }
                },
                attachDrawerToggle: drawer => {
                    let appBar = document.getElementById('app-bar');
                    if (appBar != null) {
                        let topAppBar = material.topAppBar.MDCTopAppBar.attachTo(appBar);
                        topAppBar.setScrollTarget(document.getElementById('main-content'));
                        topAppBar.listen('MDCTopAppBar:nav', () => {
                            drawer.open = !drawer.open;
                        });
                        return topAppBar;
                    }
                    return undefined;
                },
                attachNotificationDialog: () => {
                    let element = document.getElementById('cas-notification-dialog');
                    if (element != null) {
                        return material.dialog.MDCDialog.attachTo(element);
                    }
                    return undefined;
                },
                attachNotificationToggle: dialog => {
                    let btn = document.getElementById('cas-notifications-menu');
                    if (btn != null) {
                        btn.addEventListener('click', () => {
                            dialog.open();
                        });
                    }
                }
            }
            function supportsCookies() {
                try {
                    document.cookie = 'testcookie=1';
                    let ret = document.cookie.indexOf('testcookie=') !== -1;
                    document.cookie = 'testcookie=1; expires=Thu, 01-Jan-1970 00:00:01 GMT';
                    return ret;
                } catch (e) {
                    console.log(e);
                    return false;
                }
            }

            document.addEventListener('DOMContentLoaded', () => {
                if (material) {
                    header.init();
                }

                if (!supportsCookies()) {
                    countMessages++;
                    window.jQuery('#cookiesSupportedDiv').show();
                }

                if (countMessages === 0) {
                    window.jQuery('#notifications-count').remove();
                    window.jQuery('#cas-notifications-menu').remove();
                } else {
                    window.jQuery('#notifications-count').text(`(${countMessages})`)
                }
            });
        })(typeof mdc !== 'undefined' && mdc);
    </script>
</div>


</body>

</html>
